<template>
    <div id="tmpl">
        <div id="cate">
            <ul v-bind="{style:'width:'+ulWidth+'px'}">
                <li @click="getimages(0)">全部</li>
                <li v-for="item in cats" @click="getimages(item.id)">{{item.title}}</li>

            </ul>
        </div>
        <!-- 图片列表 -->
        <div id="imglist">
            <ul>
                <li v-for="item in list">
                    <router-link v-bind="{to:'/photo/photoinfo/'+item.id}" >
                    
                    <img v-lazy="item.img_url">
                    <div id="desc">
                        <h5 v-text="item.title"></h5>
                        <p v-text="item.zhaiyao"></p>
                    </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import common from '../../kids/common.js';
import { Toast } from 'mint-ui';
export default {
    data() {
        return {
            ulWidth:0,
            cats: [],//存储标题的数据
            list: []//存储图片的数据
        }
    },
    created() {
        //加载列表信息
        this.getcats();
        //加载全部图片信息
        var all = 0;
        this.getimages(all);
    },
    methods: {
        //获取图片
        getimages(cateid) {
            cateid = cateid || 0;
            var url = common.apidomain + '/api/getimages/' + cateid;
            this.$http.get(url).then(function(res) {
                var body = res.body;
                if (body.status != 0) {
                    Toast(body.message);
                    return;
                }
                this.list = body.message;
            })
        },
        //获取列表
        getcats() {
            //1.0确定url 地址
            var url = common.apidomain + '/api/getimgcategory';
            //2.0发送ajax请求
            this.$http.get(url).then(function(res) {
                console.log(res);
                if (res.body.status != 0) {
                    Toast(res.body.message);
                    return;
                }
                this.cats = res.body.message;
                //当前分类的宽度= 每个li的宽度*li的总个数
                var w =66;
                var count =res.body.message.length+1;
                this.ulWidth =w*count;
            })
        }
    }
}
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
}

#cate {     
    width: 375px;
    height: 30px;
    max-width: 375px;
    overflow-x: auto;
}

#cate ul {
    width: 1400px;
    padding-left: 10px;
}

#cate li {
    list-style: none;
    display: inline-block;
    color: #0095ff;
    font-size: 14px;
    padding-left: 10px;
    cursor: pointer;
}


/*实现图片列表样式*/

#imglist {}

#imglist ul {
    padding-left: 0px;
}

#imglist li {
    list-style: none;
    position: relative;
}

#imglist img {
    width: 100%;
    height: 300px;
}

#desc {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 2px;
    left: 0px;
}

#desc h5 {
    color: #ffffff;
    font-weight: bold;
}

#desc p {
    color: #fff;
}

image[lazy=loading] {
    width: 40px;
    height: 300px;
    margin: auto;
}
</style>

